<template>
  <div class="box">
    <div class="commonHeader">
      物联网智能硬件
    </div>
    <div class="content">
      <div
        class="data-box"
        style="height:100%"
      >
        <div class="line-box">
          <i class="t-l-line"></i>
          <i class="l-t-line"></i>
        </div>
        <div class="line-box">
          <i class="t-r-line"></i>
          <i class="r-t-line"></i>
        </div>
        <div class="line-box">
          <i class="b-l-line"></i>
          <i class="l-b-line"></i>
        </div>
        <div class="line-box">
          <i class="b-r-line"></i>
          <i class="r-b-line"></i>
        </div>
        <div class="inner-box_father">
          <div class="inner-box--pgdl">
            <p class="title">门禁</p>
            <div class="inner-box--pgdl-box">
              <el-row class="analysis-container">
                <el-col
                  :span="6"
                  class="analysis-box"
                >
                  <div class="equipment count">
                    {{ accessControl_model.deviceNum }}
                  </div>
                  <p class="desc">设备总数</p>
                </el-col>
                <el-col
                  :span="6"
                  class="analysis-box"
                >
                  <div class="online count">
                    {{ accessControl_model.onlineNum }}
                  </div>
                  <p class="desc">在线数</p>
                </el-col>
                <el-col
                  :span="6"
                  class="analysis-box"
                >
                  <div class="openDoor count">
                    {{ accessControl_model.openDoorNum }}
                  </div>
                  <p class="desc">开门次数</p>
                </el-col>
                <el-col
                  :span="6"
                  class="analysis-box"
                >
                  <div class="equipment count">
                    {{ accessControl_model.damageRate }}%
                  </div>
                  <p class="desc">设备损坏率</p>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="inner-box--lift">
            <p class="title">
              电梯
<!--              <span class="subtitle">设备总数 <span class="count">{{elevator_model.sum}}</span> 在线数-->
<!--              <span class="count">{{elevator_model.onlineNum}}</span></span>-->
            </p>
            <div class="elevator-container">
              <ul class="elevatorTabs">
                <template v-for="(lift,index) in elevator_model.list">
                  <li :key="lift.liftId">
                    <p
                      :class="active_idenx===index?'active':''"
                      @click="handleChangeLift(index,lift.tnum)"
                    >{{lift.useEntitiesNum}}</p>
                  </li>
                </template>
              </ul>
              <el-row
                :gutter="15"
                class="grid-container"
              >
                <el-col :span="3">
                  <div class="grid-content bg-purple">
                    <img
                      src="../../assets/icon_cengshu.png"
                      alt=""
                    />
                    <p class="grid-content--title">{{elevator_model.detail.layerNumber}}层</p>
                  </div>
                </el-col>
                <el-col :span="3">
                  <div class="grid-content">
                    <img
                      src="../../assets/icon_renshu.png"
                      alt=""
                    />
                    <p class="grid-content--title">{{elevator_model.detail.hasPerson?"有人":"无人"}}</p>
                  </div>
                </el-col>
                <el-col :span="3">
                  <div class="grid-content">
                    <img
                      src="../../assets/icon_guanmen.png"
                      alt=""
                    />
                    <p class="grid-content--title">{{elevator_model.detail.doorStatus==='0'?'开门':'关门'}}</p>
                  </div>
                </el-col>
                <el-col :span="3">
                  <div class="grid-content">
                    <img
                      src="../../assets/icon_wuhoumen.png"
                      alt=""
                    />
<!--                    <p class="grid-content&#45;&#45;title">{{elevator_model.detail.hasbackDoor?'有后门':'无后门'}}</p>-->
                    <p class="grid-content--title">无后门</p>
                  </div>
                </el-col>
                <el-col :span="3">
                  <div class="grid-content">
                    <img
                      src="../../assets/icon_shangxing.png"
                      alt=""
                    />
                    <p class="grid-content--title">{{elevator_model.detail.runningDict==='0'?'上行':'下行'}}</p>
                  </div>
                </el-col>
                <el-col :span="3">
                  <div class="grid-content">
                    <img
                      src="../../assets/icon_sudu.png"
                      alt=""
                    />
                    <p class="grid-content--title">{{elevator_model.detail.runningSpeed}}m/s</p>
                  </div>
                </el-col>
                <el-col :span="3">
                  <div class="grid-content">
                    <img
                      src="../../assets/icon_wendi.png"
                      alt=""
                    />
                    <p class="grid-content--title">{{elevator_model.detail.temperature}}℃</p>
                  </div>
                </el-col>
                <el-col :span="3">
                  <div class="grid-content">
                    <img
                      src="../../assets/icon_dianliang.png"
                      alt=""
                    />
                    <p class="grid-content--title">{{elevator_model.detail.electricity?elevator_model.detail.electricity:'0'}}%</p>
                  </div>
                </el-col>
              </el-row>
              <el-row
                :gutter="15"
                class="grid-container"
              >
                <el-col :span="3">
                  <div class="grid-content bg-purple">
                    <p class="count">{{elevator_model.detail.runTimes}}</p>
                    <p class="grid-content--title">运行次数</p>
                  </div>
                </el-col>
                <el-col :span="3">
                  <div class="grid-content">
                    <p class="count">{{elevator_model.detail.doorMachinesTimes}}</p>
                    <p class="grid-content--title">门机次数</p>
                  </div>
                </el-col>
                <el-col :span="3">
                  <div class="grid-content">
                    <p class="count">{{elevator_model.detail.brakesTimes}}</p>
                    <p class="grid-content--title">制动器次数</p>
                  </div>
                </el-col>
                <el-col :span="3">
                  <div class="grid-content">
                    <p class="count">{{elevator_model.detail.contactorTimes}}</p>
                    <p class="grid-content--title">接触器次数</p>
                  </div>
                </el-col>
                <el-col :span="3">
                  <div class="grid-content">
                    <p class="count">{{elevator_model.detail.steelWireTimes}}</p>
                    <p class="grid-content--title">钢绳折弯</p>
                  </div>
                </el-col>
                <el-col :span="3">
                  <div class="grid-content">
                    <p class="count">{{(Number(elevator_model.detail.runningTime)/3600).toFixed(1)}}h</p>
                    <p class="grid-content--title">运行时长</p>
                  </div>
                </el-col>
                <el-col :span="3">
                  <div class="grid-content">
                    <p class="count">{{(Number(elevator_model.detail.runningDistance)/1000).toFixed(1)}}km</p>
                    <p class="grid-content--title">运行距离</p>
                  </div>
                </el-col>
                <el-col :span="3">
                  <div class="grid-content">
                    <p class="count">{{elevator_model.detail.stopTimes}}</p>
                    <p class="grid-content--title">停层次数</p>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as api from '@/api'
import { encrypt } from '@/util'
import { setToken, getToken } from '@/util/auth'
import userConfig from '@/config/external_config'
export default {
  data() {
    return {
      token: '',
      //门禁数据
      accessControl_model: {
        deviceNum: '',
        openDoorNum: '',
        damageRate: '',
        onlineNum: ''
      },
      elevator_model: {
        sum: '',
        onlineNum: '',
        list: [],
        detail: ''
      },
      active_idenx: 0,
      timer: ''
    }
  },
  created() {
    this.handelLogin()
  },
  mounted() {
    if (getToken()) {
      this.handleInit()
    } else {
      this.handelLogin()
    }
    this.timer = setInterval(() => {
      this.handleInit()
    }, 60000)
  },
  methods: {
    handleInit() {
      this.getLiftListgetByPage()
      this.getAllLockCount()
      this.getDeviceNum()
      this.getLiftListgetByPage()
    },
    async getAllLockCount() {
      let data = await api.getAllLockCount()
      this.accessControl_model.deviceNum = data.deviceNum
      this.accessControl_model.openDoorNum = data.openDoorNum
      this.accessControl_model.damageRate = data.damageRate
      this.accessControl_model.onlineNum = data.onlineNum
    },
    //获取token
    async handelLogin() {
      let params = {
        ...userConfig,
        dataTime: new Date().getTime()
      }
      let jsons = encrypt(JSON.stringify(params))
      api.login(jsons).then(res => {
        setToken(res.data.data.token)
      })
    },
    //获取电梯设备概况
    async getDeviceNum() {
      let data = await api.getDeviceNum(
        'O8vpszNVfLto2fvdbbYXNreVgHS51rVbJp6wpZ9YnSY='
      )
      this.elevator_model.sum = data.sum
      this.elevator_model.onlineNum = data.onlineNum
    },
    //获取电梯内详情数据
    async getLiftRealTimeData(liftId) {
      let params = {
        liftId: liftId,
        dataTime: new Date().getTime()
      }
      let jsons = encrypt(JSON.stringify(params))
      let data = await api.getLiftRealTimeData(jsons)
      this.elevator_model.detail = data
    },
    //获取电梯列表
    async getLiftListgetByPage() {
      let params = {
        pageNum: '1',
        pageSize: '10',
        dataTime: new Date().getTime()
      }
      let jsons = encrypt(JSON.stringify(params))
      let data = await api.getLiftListgetByPage(jsons)
      let list = data.list
      list = list.sort((a, b) => {
        return a.liftId - b.liftId
      })
      this.elevator_model.list = list
      if (list && list.length > 0) {
        this.getLiftRealTimeData(list[0].tnum)
      }
    },
    //切换电梯
    handleChangeLift(index, liftId) {
      this.active_idenx = index
      this.getLiftRealTimeData(liftId)
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}
</script>
<style lang="less">
.content {
  .el-tabs__item.is-active {
    color: #fff !important;
  }
}
</style>
<style lang="less" scoped>
.box {
  height: 55%;
  .content {
    padding-top: 0.5rem;
    box-sizing: border-box;
    height: calc(100% - 2rem);
    padding: 1rem 0.5rem;
    .inner-box_father {
      height: 100%;
      overflow: hidden;
      z-index: 999;
      position: relative;
    }
    .inner-box--pgdl {
      height: 36%;
      display: flex;
      flex-flow: column;
      .inner-box--pgdl-box {
        flex: 1;
        display: flex;
        align-items: center;
      }
    }
    .inner-box--lift {
      height: 64%;
    }
    .title {
      padding: 0.5rem 1rem;
      font-size: 16px;
      font-weight: 700;
    }
    .subtitle {
      quotes: '(' ')';
      padding-left: 16px;
      opacity: 0.5;
      font-size: 12px;
      .count {
        font-weight: 700;
        font-size: 14px;
      }
    }
    .subtitle::before {
      content: open-quote ' ';
    }
    .subtitle::after {
      content: ' ' close-quote;
    }
    .analysis-container {
      width: 100%;
      padding: 0.5rem 0;
      .analysis-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        .count {
          height: 72px;
          width: 72px;
          line-height: 72px;
          text-align: center;
        }
        .desc {
          padding-top: 5px;
          font-weight: 500;
          font-size: 14px;
        }
        .equipment {
          background: url('../../assets/entranceGuard_bg3.png') no-repeat;
          background-size: cover;
        }
        .online {
          background: url('../../assets/entranceGuard_bg2.png') no-repeat;
          background-size: cover;
        }
        .openDoor {
          background: url('../../assets/entranceGuard_bg1.png') no-repeat;
          background-size: cover;
        }
      }
    }
    .elevator-container {
      margin: 0 1rem;
      padding-bottom: 10px;
      background: rgba(255, 255, 255, 0.05);
    }
    .elevatorTabs {
      padding: 0;
      overflow: hidden;
      li {
        padding: 5px 0 0;
        width: 50%;
        float: left;
        list-style: none;
        text-align: center;
        font-size: 14px;
        background: rgba(255, 255, 255, 0.04);
      }
      p {
        display: inline-block;
        padding-bottom: 2px;
        width: 24px;
        cursor: pointer;
      }
      p.active {
        border-bottom: 2px solid #fff;
      }
    }
    .grid-container {
      padding: 5px;
      .grid-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          height: 32px;
          width: 32px;
        }
        .count {
          height: 36px;
          width: 32px;
          font-size: 12px;
          line-height: 36px;
          text-align: center;
          background: url('../../assets/icon.png') no-repeat;
          background-size: cover;
        }
        &--title {
          width: 42px;
          text-align: center;
          padding-top: 5px;
          font-size: 10px;
          font-weight: 500;
        }
      }
    }
  }
}
</style>
